<!-- 用户管理  -->
<template>
  <n-space vertical>
    <n-form ref="formRef" label-placement="left" label-width="auto" require-mark-placement="right-hanging" size="medium" inline>
      <n-form-item label="状态" path="inputValue">
        <n-input v-model:value="listQurey.status" placeholder="请选择" />
      </n-form-item>
      <n-form-item label="用户名称" path="inputValue">
        <n-input v-model:value="listQurey.name" placeholder="请输入用户名称" />
      </n-form-item>
      <n-button type="info" @click="handleAdd">新增</n-button>
    </n-form>

    <n-card>
      <n-space vertical>
        <n-data-table :bordered="false" :single-line="false" :columns="columns" :data="tableData" :loading="listLoading" />

        <n-space>
          <n-pagination :item-count="tableTotal" :page-sizes="[10, 20, 30, 40]" show-size-picker>
            <template #prefix="{ itemCount }">共 {{ itemCount }} 条</template>
          </n-pagination>
        </n-space>
      </n-space>
    </n-card>

    <n-modal
      v-model:show="showModal"
      preset="dialog"
      :show-icon="false"
      :auto-focus="false"
      title="Dialog"
      :mask-closable="false"
      :closable="false"
      style="width: 50%"
    >
      <template #header>
        <div>{{ modalTitle }}</div>
      </template>
      <n-form ref="formRef" label-placement="left" label-width="100" :model="formData" :rules="modelRules" :disabled="modalType === 'look'">
        <n-form-item label="登录名称" path="loginName">
          <n-input v-model:value="formData.loginName" placeholder="请选择" />
        </n-form-item>
        <n-form-item label="密码" path="password" v-if="modalType === 'add'">
          <n-input v-model:value="formData.password" placeholder="请输入密码" type="password" show-password-on="mousedown"></n-input>
        </n-form-item>
        <n-form-item label="姓名" path="name">
          <n-input v-model:value="formData.name" placeholder="请选择" />
        </n-form-item>
        <n-form-item label="性别" path="gender">
          <n-select v-model:value="formData.gender" :options="gdOptions" />
        </n-form-item>
      </n-form>
      <template #action>
        <n-button @click="modalCancel">取消</n-button>
        <n-button type="error" @click="modalConfirm" v-if="modalType !== 'look'">确定</n-button>
      </template>
    </n-modal>
  </n-space>
</template>

<script lang="ts" setup>
  import { h, ref } from 'vue'
  import { NSpace, NForm, NFormItem, NInput, NCard, NButton, NDataTable, NModal, NPopconfirm, NSelect, NPagination } from 'naive-ui'
  import type { FormInst, FormRules, DataTableColumns } from 'naive-ui'

  const formRef = ref<FormInst | null>(null)
  const listLoading = ref(false)
  const tableData = ref([])
  const listQurey = ref({ status: null, name: null })
  const showModal = ref(false)
  const modalTitle = ref('')
  const modalType = ref('')
  const formData = ref({
    no: null,
    name: null,
    loginName: null,
    password: null,
    gender: null,
    status: 1
  })
  const modelRules: FormRules = {
    name: { required: true, message: '请输入名称', trigger: 'blur' },
    loginName: { required: true, message: '请输入登录名', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' }
  }
  const gdOptions = [
    { label: '未知', value: 0 },
    { label: '男', value: 1 },
    { label: '女', value: 2 }
  ]
  function modalConfirm(e: MouseEvent) {
    e.preventDefault()
    formRef.value?.validate((errors) => {
      if (!errors) {
        console.log(errors)
        modalCancel()
      } else {
        console.log(errors)
      }
    })
  }
  function modalCancel() {
    showModal.value = false
    // 重置表单
    formData.value = {
      no: null,
      name: null,
      loginName: null,
      password: null,
      gender: null,
      status: 1
    }
  }
  // 新增
  function handleAdd() {
    showModal.value = true
    modalTitle.value = '新增'
    modalType.value = 'add'
  }
  // 获取表格数据
  search()
  function search() {
    listLoading.value = true
    tableData.value = createTableData() as any
    setTimeout(() => {
      listLoading.value = false
    }, 1000)
  }

  interface RowData {
    no: number
    name: string
    loginName: string
    gender: number
    status: number
  }
  function createTableData(): RowData[] {
    return [
      {
        no: 0,
        name: 'John Brown',
        loginName: 'sss1',
        gender: 1,
        status: 1
      },
      {
        no: 1,
        name: 'Jim Green',
        loginName: 'sss2',
        gender: 2,
        status: 0
      },
      {
        no: 2,
        name: 'Joe Black',
        loginName: 'sss3',
        gender: 3,
        status: 1
      }
    ]
  }

  function createColumns({
    handleInfo,
    handleEdit,
    handleDelete
  }: {
    handleInfo: (rowData: RowData) => void
    handleEdit: (rowData: RowData) => void
    handleDelete: (rowData: RowData) => void
  }): DataTableColumns<RowData> {
    return [
      {
        title: '名称',
        key: 'name'
      },
      {
        title: '登录名称',
        key: 'loginName'
      },
      {
        title: '性别',
        key: 'gender',
        render(row) {
          return row.gender === 1 ? '男' : row.gender ? '女' : '未知'
        }
      },
      {
        title: '状态',
        key: 'status',
        render(row) {
          return row.status === 1 ? '启用' : '停用'
        }
      },
      {
        width: 220,
        title: '操作',
        key: 'actions',
        render(row) {
          return h(NSpace, null, {
            default: () => [
              h(
                NButton,
                {
                  quaternary: true,
                  type: 'default',
                  size: 'tiny',
                  onClick: () => void handleInfo(row)
                },
                { default: () => '查看' }
              ),
              h(
                NButton,
                {
                  quaternary: true,
                  type: 'info',
                  size: 'tiny',
                  onClick: () => void handleEdit(row)
                },
                { default: () => '编辑' }
              ),
              h(
                NPopconfirm,
                {
                  onPositiveClick: () => {
                    handleDelete(row)
                  }
                },
                {
                  trigger: () =>
                    h(
                      NButton,
                      {
                        quaternary: true,
                        type: 'error',
                        size: 'tiny'
                      },
                      { default: () => '删除' }
                    ),
                  default: () => `确认要'删除'该条数据吗？`
                }
              )
            ]
          })
        }
      }
    ]
  }
  const columns = createColumns({
    // 查看
    handleInfo(rowData: any) {
      showModal.value = true
      modalTitle.value = '查看'
      modalType.value = 'look'
      formData.value = rowData
    },
    // 编辑
    handleEdit(rowData: any) {
      showModal.value = true
      modalTitle.value = '编辑'
      modalType.value = 'edit'
      formData.value = rowData
    },
    // 删除
    handleDelete(rowData) {
      console.log('删除')
    }
  })
  const tableTotal = tableData.value.length
</script>

<style lang="less" scoped>
  .tree-card {
    min-height: 750px;
  }
</style>
